/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-06-11 23:51:16
 * @version $Id$
 */

(function fragmentBanner(){
	var oBanner = document.getElementById('banner'),
		oCon = oBanner.getElementsByTagName('div')[0],
		oBtns = oBanner.getElementsByTagName('span'),
		aConI = oBanner.getElementsByTagName('i');

	// width: 790px;
	// height: 340px;
	var bannerAttr = {
			width : '790px',
			height : '340px'
		},
		grid = {
			list : 10, //行
			colum : 10	//列
		},
		aIAttr = {
			width : parseFloat(bannerAttr.width) / grid.colum,
			height : parseFloat(bannerAttr.height) / grid.list
		},
		index = 0,
		imgs = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg'];

	var w = typeof bannerAttr.width === 'number'?bannerAttr.width + 'px':bannerAttr.width
	oBanner.style.width = w;

	var h = typeof bannerAttr.height === 'number'?bannerAttr.height + 'px':bannerAttr.height;
	oBanner.style.height = h;

	for(var i = 0;i < grid.list;i++){
		for(var j = 0;j<grid.colum;j++){
			var thisI =document.createElement("i");
			thisI.style.width = aIAttr.width + 'px';
			thisI.style.height = aIAttr.height + 'px';

			thisI.style.backgroundPositionX = -j * aIAttr.width + 'px';
			thisI.style.backgroundPositionY = -i * aIAttr.height + 'px';
			thisI.style.backgroundImage = 'url('+imgs[index]+')';
			thisI.style.backgroundSize = w + h;
			oCon.appendChild(thisI);
		}
	}

	function change(){
		for(var i = 0,iL = aConI.length; i < iL; i++){
			animation(aConI[i],{
				top : parseInt(Math.random()*2 * parseFloat(h)) - parseFloat(h),
				left : parseInt(Math.random()* 2 * parseFloat(w)) - parseFloat(w),
				opacity : 0,
				transform : {
					start : function(){
						var rotateX = parseInt(Math.random() * 360) + 360,
							rotateY = parseInt(Math.random() * 360) + 360,
							rotate = parseInt(Math.random() * 360) +360;

						return {
							rotateX : {
								start : rotateX,
								change : -rotateX
							},
							rotateY : {
								start : rotateY,
								change : -rotateY
							},
							rotate : {
								start : rotate,
								change : -rotate
							}
						};
					},
					up : function (start,now,duration,key,timingFn){
							var transform = "";
						for(var attr in start){
							// transform
							transform += attr + '('+ timingFn(now,start[attr].start,start[attr].change,duration) +'deg)';
						}
						this.style.transform = transform;
					}
				}
			},{
				duration : parseInt(Math.random() * 600) + 600
			},function(){
				this.style.backgroundImage = 'url('+imgs[index]+')';
				animation(this,{
					top : 0,
					left : 0,
					opacity : 1,
					transform : {
						start : function(){
							var rotateX = parseInt(Math.random() * 360) + 360,
								rotateY = parseInt(Math.random() * 360) + 360,
								rotateZ = parseInt(Math.random() * 360) +360;

							return {
								rotateX : {
									start : rotateX,
									change : -rotateX
								},
								rotateY : {
									start : rotateY,
									change : -rotateY
								},
								rotateZ : {
									start : rotateZ,
									change : -rotateZ
								}
							};
						},
						up : function (start,now,duration,key,timingFn){
							var transform = "";
							for(var attr in start){
								transform += attr + '('+ timingFn(now,start[attr].start,start[attr].change,duration) +'deg)';
							}

							this.style.transform = transform;

						}
					}
				},{duration : parseInt(Math.random() * 600) + 600});
			});
		}
	}

	for(var i = 0; i < oBtns.length;i++){
		(function (i){
			oBtns[i].onclick = function(){
				if(i){
					index++;
					index %= imgs.length;
				}else{
					index--;
					index = index<0 ? imgs.length-1 : index;
				}
				change();
			}
		})(i);
	}


})();